<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/theme.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.0/flv.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> 
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>-->
    <style>
        header {
            background-image: url(img/default_banner.jpg);
            width: 100%;
            height: 250px;
            padding-top: 1px;
            object-fit: cover;
            object-position: center;
            background-repeat: no-repeat;
            display: flex;
            background-size: 100% 100%;
            margin-bottom: 30px;
        }

        .screen_form {
            width: 75%;
            height: 600px;
            background-color: gainsboro;
        }

        aside {
            width: 25%;
            height: 600px;
            background-color: antiquewhite;
        }

        .main_flex {
            display: flex;
        }

        .top_title {
            display: flex;
            align-items: center;
        }

        h2 {
            margin-left: 20px;
        }
    </style>
</head>

<body>
<header id="header">

</header>

<div class="theme_width top_title">
    <div>
        <img src="img/default_avatar_2.webp" alt="">
        <p>Excellet</p>
    </div>
    <h2>橄榄球开局上高地</h2>
</div>
<main class="theme_width main_flex">
    <div class="screen_form">
        <video id="videoElement" controls data-setup='{}' class="video-js vjs-default-skin"
               preload="auto">
            <source id="source" src="" type="application/x-mpegURL"/>
        </video>
    </div>
    <aside>

    </aside>
</main>


<script>
    // if(Hls.isSupported()) {
    //     var video = document.getElementById('videoElement');
    //     var hls = new Hls();
    //     hls.loadSource('http://127.0.0.1:7002/live/movie2.m3u8');
    //     hls.attachMedia(video);
    //     hls.on(Hls.Events.MANIFEST_PARSED,function() {
    //         video.play();
    //     });
    // }
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
        alert('抱歉，Android平台不支持flv')

    } else {
        //document.write("电脑访问.");
    }
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://127.0.0.1:7001/live/movie.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
    }
</script>
</body>

</html>